<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('付款统计')" />
</head>
<body class="white-bg">
     <div  class="wrapper wrapper-content animated fadeInRight ibox-content">
     	<form class="form-horizontal m"  th:object="${financePay}">
			<input name="orderId" th:field="*{orderId}" type="hidden"> 
			<input name="customerId" type="hidden" id="customerId" />
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">客户名称：</label>
						<div class="col-sm-8">
							<div class="form-control-static" th:text="${financePay.customer.customerName}"></div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">订单：</label>
						<div class="col-sm-8">
							<div class="form-control-static" th:text="${financePay.order.orderName}"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-4 control-label">订单金额：</label>
						<div class="col-sm-8">
							<div id="totalPrice" class="form-control-static" th:text="${financePay.order.totalPrice}"></div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="form-group">
						<label style="color:red;" class="col-sm-4 control-label">已回款：</label>
						<div class="col-sm-8">
							<div style="color:red;" class="form-control-static" id="payMoney"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label style="color:red;" class="col-sm-4 control-label">欠款：</label>
						<div class="col-sm-8">
							<div style="color:red;" class="form-control-static" id="debt" name="debt"></div>
						</div>
					</div>
				</div>
			</div>
		</form>
        <div class="row">
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var payTypeDatas = [[${@dict.getType('pay_type')}]];
        var payTimesDatas = [[${@dict.getType('pay_times')}]];
        var payStatusDatas = [[${@dict.getType('pay_status')}]];
        var prefix = ctx + "crm/pay";

        $(function() {
            var options = {
                url: prefix + "/list",
		        sortName: "payDate",
		        sortOrder: "desc",
		        showFooter: true,
		        showSearch: false,
		        showRefresh: false,
		        showToggle: false,
		        showColumns: false,
		        footerStyle: footerStyle,
                modalName: "回款记录",
                columns: [
                {
                    field : 'payId', 
                    title : '合同付款ID',
                    visible: false
                },
                {
                    field : 'payDate', 
                    title : '回款时间',
                    formatter: function(value, row, index) {
                        return value.substring(0,16);
                     }
                },
                {
                    field : 'payMoney', 
                    title : '回款金额',
				    footerFormatter:function (value) {
				    	var payMoney = 0;
				        for (var i in value) {
				        	payMoney += parseFloat(value[i].payMoney);
				        }
				        var debt=parseFloat($("#totalPrice").text())-parseFloat(payMoney);
				        $("#payMoney").html(payMoney);
				        $("#debt").html(debt);
				        return "合计：" + payMoney;
				    }
                },
                {
                    field : 'payTimes', 
                    title : '期次',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(payTimesDatas, value);
                    }
                },
                {
                    field : 'payType', 
                    title : '付款方式',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(payTypeDatas, value);
                    }
                }]
            };
            $.table.init(options);
        });
        
        function footerStyle(column) {
        	return {
        		payMoney: {
        	        css: { color: 'red', 'font-weight': 'normal' }
        	    }
        	}[column.field]
          }
    </script>
</body>
</html>